import * as React from 'react';
import { useEffect, useState } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import * as Icon from '@ant-design/icons'
import { MobXProviderContext, observer } from 'mobx-react';
import { renderRoutes } from '@utils/router.config';
import * as styles from './index.scss';
import { Link } from 'react-router-dom';
// 获取所有路由配置信息
import consoleRoutes from '@pages/console/routes';
import { SdHeader } from '../components'

const { SubMenu } = Menu;
const { Footer, Content, Sider } = Layout;

interface IProps {
  route: any;
  rootStore: any;
  location: any;
}

function useStores(name: string) {
  return React.useContext(MobXProviderContext)[name];
}

const iconBC = (name:string)=>
  React.createElement(Icon && (Icon as any)[name],{})

const getBreadCrumb = (pathname:string,route:any) => {
  const m = []
  for(let i=0;i<route.length;i++){
    if(route[i].path.indexOf(pathname)>=0){
      m.push(route[i].title||'')
    }
  }
  return m
}


function BaseLayout(props: IProps) {
  const routes = props.route.routes;
  const pathname = props.location.pathname;
  const rootStore = useStores('rootStore');
  const [collapsed, setCollapsed] = useState(false); 
  const onCollapse = (collapsed:boolean) => {
    setCollapsed(collapsed)
  };
  console.log(props)


  return (
    <Layout className={styles.layout}>
      <Sider width={200} collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className={styles.title}>
          运营系统
        </div>
        <Menu
          mode="inline"
          theme="dark"
          defaultSelectedKeys={[pathname]}
          // defaultOpenKeys={['sub1']}
        >
          {
            consoleRoutes.map((item:any)=>{
              if(item.isSider){
                if(item.children&&item.children.length>0){
                  return <SubMenu key={item.path} icon={item.icon ? iconBC(item.icon): ''} title={item.title}>
                    {
                      item.children.map((child:any)=>{
                        if(child.isSider){
                          return <Menu.Item key={child.path}>{child.title}</Menu.Item>
                        }
                      })
                    }
                  </SubMenu>
                }else{
                  return <Menu.Item key={item.path} icon={item.icon ? iconBC(item.icon): ''}>
                    <Link className={styles.href} to={item.path}>{item.title}</Link>
                  </Menu.Item>
                }
              }
            })
          }
        </Menu>
      </Sider>
      <Layout>
      <SdHeader />
        <Content
          style={{ margin: '0 16px' }}
        >
         <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>首页</Breadcrumb.Item>
          {
            getBreadCrumb(pathname,consoleRoutes).map((item)=><Breadcrumb.Item key={item}>{item}</Breadcrumb.Item>)
          }
        </Breadcrumb>
        <div className={styles.content}>
        {renderRoutes(routes)}
        </div>
          
        </Content>
        <Footer style={{ textAlign: 'center' }}>国家超级计算济南中心 ©2021 Created by quancloud</Footer>
      </Layout>
    </Layout>
  );
}
export default observer(BaseLayout);
